<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" label-width="80px">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="">新增客户</el-button>
                        <el-input style="width:200px;" v-model="childCode" clearable placeholder="客户简称" class="handle-input mr10"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="research()">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="dutyData" border style="width: 100%" ref="multipleTable">
                <el-table-column prop="name" label="客户全称" width="120">
                </el-table-column>
                <el-table-column prop="code" label="客户简称">
                </el-table-column>
                <el-table-column prop="code" label="公司地址">
                </el-table-column>
                <el-table-column prop="code" label="采购员">
                </el-table-column>
                <el-table-column prop="code" label="采购员电话">
                </el-table-column>
                <el-table-column prop="code" label="收货人">
                </el-table-column>
                <el-table-column prop="code" label="收货人电话">
                </el-table-column>
                <el-table-column prop="code" label="收货地址">
                </el-table-column>
                <el-table-column prop="code" label="运输时间">
                </el-table-column>
                <el-table-column prop="code" label="状态">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" icon="el-icon-close" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="page_size" :total='total'>
                </el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="工艺名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="工艺编码">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "customer",
    data() {
        return {
            url: this.url_,
            dutyData: [],//工艺表格信息
            dutyItems: [],//下拉菜单
            cur_page: 1, //默认分页为第一页
            total: 10, //默认分页总条数
            page_size: 10, //分页每页条数
            name: "", //查询条件工艺名
            childCode: '',//查询条件的工艺编码
            editVisible: false, //编辑弹出框
            delVisible: false,//删除弹出框
            form: {
                //编辑对话框内容
                id: '',
                name: '',
                code: '',
                parentId: '',
            },
            idxData: '',//当前选择的用户
            idx: -1 //数据下标
        };
    },
    created() {
        //在模板渲染成html前调用，即通常初始化某些属性值
        //查询工艺
        this.getData();
        this.getAllData();
    },
    computed: {
        //在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
    },
    methods: {
        // 分页导航
        handleCurrentChange(val) {
            this.cur_page = val;
            this.getData();
        },
        handleEdit(index, row) {
            //打开编辑对话框
            this.idx = index;
            this.form = {
                id: row.id,
                name: row.name,
                code: row.code,
                parentId: row.parent_id,
            };
            this.editVisible = true;
        },
        handleDel(index, row) {
            //打开删除对话框
            this.idx = index;
            this.form = {
                id: row.id,
                name: row.name,
                code: row.code,
                parentId: row.parent_id,
            };
            this.delVisible = true;
        },
        research() {
            //查询按钮
            this.getData(this.name);
        },
        saveEdit() {
            //编辑确定按钮
            this.saveData();
        },
        getAllData() {
            //查询所有的工艺
            this.$axios({
                method: "post",
                url: this.url + "dictionary/findAllDictionary.do",
                params: {
                    code: 'GYXZ',
                }
            }).then(res => {
                if (res.data.message == true) {
                    this.dutyItems = res.data.data;
                } else {
                    this.$message.error('查询失败');
                }
            });
        },
        getData(name) {
            //分页查询工艺
            this.$axios({
                method: "post",
                url: this.url + "dictionary/PageAllDictionary.do",
                params: {
                    code: 'GYXZ',
                    page: this.cur_page,
                    rows: this.page_size,
                    name: name,
                    childCode: this.childCode,
                }
            }).then(res => {
                if (res.data.message == true) {
                    this.dutyData = res.data.data.rows;
                    this.total = res.data.data.total;
                } else {
                    this.$message.error('查询失败');
                }
            });
        },
        saveData() {
            //保存编辑
            this.$axios({
                method: "post",
                url: this.url + "dictionary/addDictionaryName.do",
                params: {
                    id: this.form.id,
                    name: this.form.name,
                    code: this.form.code,
                    parentId: this.form.parentId,
                }
            }).then(res => {
                if (res.data) {
                    this.getData();
                    this.getAllData();
                    this.editVisible = false;
                    this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                } else {
                    this.$message.error('修改失败');
                }
            });
        },
        deleteRow() {
            //删除工艺
            this.$axios({
                method: "post",
                url: this.url + "dictionary/addDictionaryName.do",
                params: {
                    id: this.form.id,
                    name: this.form.name,
                    code: this.form.code,
                    parentId: this.form.parentId,
                }
            }).then(res => {
                if (res.data) {
                    this.getData();
                    this.getAllData();
                    this.delVisible = false;
                    this.$message.success(`删除第 ${this.idx + 1} 行成功`);
                } else {
                    this.$message.error('删除失败');
                }
            });
        },
    }
};
</script>
<style>
.el-form-item__content{
  margin-left: 0 !important;
}
.el-dialog .el-form-item__content{
  margin-left: 80px !important;
}
</style>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
</style>
